<template>
	<view class="crm">
		<!-- <u-sticky> -->
			<!-- <view class="tops1">
				<view class="searchBox">
					<view class="search">
						<view class="inp">
							<u-search :clearabled="true"  @clear="search" @search="search" bg-color="#fff" :show-action="false" height="60" search-icon=""
								placeholder-color="rgba(15, 20, 23, 0.3)" placeholder="请输入手机号或用户ID" v-model="keyword">
							</u-search>
						</view>
						<view class="btns" @click="search">
							搜索
						</view>
					</view>
					<image @click="scanner" class="Scan-code" src="
https://oss.6mate.cn/mini/Scan-code.png" mode="">
					</image>
				</view>
				<view class="selectOptions">
					<view class="same">
						<view class="item" @click="changeTab1(index,item.value)" :class="[sel1==index?'active':'']"
							v-for="(item,index) in options1">
							{{item.name}}
						</view>
					</view>
					<view class="same">
						<view class="item" @click="changeTab2(index,item.value)" :class="[sel2==index?'active':'']"
							v-for="(item,index) in options2">
							{{item.name}}
						</view>
					</view>
					
				</view>
			</view> -->
		<!-- </u-sticky> -->
		<view v-if="list1.length" class="list" >
			<view class="item" v-for="(item,index) in list1" >
				<view class="tops">
					<view class="left">
						<view class="leftBox">
							<view class="photo">
								<image :src="item.portrait" mode=""></image>
								<view class="sex">
									<image v-if="item.gender=='FEMALE'" src="https://oss.6mate.cn/mini/girl1.png"
										mode=""></image>
									<image v-else src="https://oss.6mate.cn/mini/boy1.png" mode="">
									</image>

								</view>
							</view>

							<view class="names">
								<view class="name">
									<view class="fullname">{{item.nickName}}</view>
									<view class="tags"  :class="[GetcardTypeCodeColor(item)]">  {{ item.cardTypeName }}
									<!-- 基础VIP -->
									</view>
								</view>
								<view class="code">
									{{item.attributes}}
									
								</view>
							</view>
						</view>
						
						<view  class="btns">
							<view @click.stop="upgradationFn(item)" class="kaitong">
								绑定
							</view>
						</view>
					</view>

				</view>

			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
		<view v-else class="empty" style="padding-top: 150px;">
			<view v-if="!list1.length && senDate" class="emptyAddress-box">
				<u-empty text="暂无内容" mode="news"></u-empty>
			</view>
		</view>


	</view>
</template>

<script>


	export default {

		
		data() {
			return {
				claName:'',
				checkAll:false,
				
				curId: '',
				curPhone: '',
				transferPhone: '',
				transferToAppMask: false,
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],

				keyword: '',
				gender: "",
				isVip: "",
				cardTypeIds: [],
				sel1: 0,
				sel2: 0,
				sel3: 0,
				
			
				options3: [],
				paddingTop:''
			}
		},

		onLoad() {

			this.getlist()
			// 查询VIP类型列表
			// this.getcardTypelist()
			// this.getHieght()
			
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;
				this.getlist();
			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		
		onPullDownRefresh() {
			
			// uni.showLoading({
			// 	title: '刷新中...',
			// 	mask: true
			// })
			this.formData.page = 1;
			// this.list1 = [];
			this.getlist('fresh');
		},
		methods: {
			
			scanner(){
				let that = this;
				// 调起条码扫描
				uni.scanCode({
					scanType: ['qrCode'],
					success: function (res) {
						// console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						// that.memberGetFn(res.result)
						
						 that.keyword =  res.result
						that.formData.page = 1;
						that.getlist('fresh');
					}
				});
			},
			
			getHieght(){
				uni.createSelectorQuery().select('.tops1').boundingClientRect((rect) => {
					console.log(rect.height, 66666);
					this.paddingTop = rect.height + 12 + 'px'
				}).exec()
			},
			GetcardTypeCodeColor(item){
				if(item.cardTypeCode=='101' ||item.isVip=='0' ){
					return ''
				}else if(item.cardTypeCode=='102' ||item.cardTypeCode=='103' ){
					return 'base'
				}else if(item.cardTypeCode=='104' ||item.cardTypeCode=='105' ){
					return 'golden'
				}else if(item.cardTypeCode=='106' ||item.cardTypeCode=='107' ){
					return 'bojin'
				}else if(item.cardTypeCode=='108' ||item.cardTypeCode=='109' ){
					return 'zuanshi'
				}
			},
			
			// 开通
			upgradationFn(item){
				
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定绑定？',
					// cancelColor:'#9b9b9b',//删除按钮颜色
					confirmColor: '#F23635', //确定按钮颜色
					success: function(res1) {
						
						if(res1.confirm){
							
							that.$u.api
								.bindMiniUser({
									memberId:item.id
								})
								.then((res) => {
									if(res.code=='ok'){
										uni.showToast({
											icon:"none",
											title:'绑定成功！'
										})
									}else{
										uni.showToast({
											icon:'',
											title:res.msg
										})
									}
									that.formData.page = 1;
									// this.list1 = [];
									that.getlist('fresh');
								});
							
							
						}
						
						
						
					}
				});
				
				
				
			},
			

			
			// bindMiniUser
		
			getlist(type) {
				this.senDate = false;
				 
				let query = {
					pageIndex: this.formData.page,
					pageSize: this.formData.pageSize,
					recommend:1
				}
				let paramsQuery = {}

				if (this.$u.test.mobile(this.keyword)) {
					paramsQuery = {
						...query,
						mobile: this.keyword,
					}
				} else {
					paramsQuery = {
						...query,
						memberNo: this.keyword
					}
				}

				this.$u.api
					.memberpage(paramsQuery)
					.then((res) => {
						if(type=='fresh'){
							this.list1 = [];
						}
						this.senDate = true;
						if (res.code == 'ok') {
							this.total = res.data.entityCount;
							const newlist = res.data.entities;
							this.list1.push(...newlist);
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {

						}
						uni.stopPullDownRefresh()
						uni.hideLoading();
					});
			},

			godetail(e) {
				uni.navigateTo({
					url: "/subPack/app/detail?id=" + e.id+'&attributes='+e.attributes+'&bgColor='+this.GetcardTypeCodeColor(e)
				})
			}
		}
	}
</script>

<style>
	page {
		/* background: #f0f2f5; */
	}
</style>
<style scoped lang="scss">
	.crm {
		padding: 0 0 24rpx;
		.toAppBox {
			margin: 0 auto;
			width: 670rpx;
			background: #FFFFFF;
		}

		.tops1 {
			background: #FFFFFF;
			padding: 0 32rpx 0;
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			z-index: 9;
		}

		.list {
			margin-top: -24rpx;
			padding: 0 32rpx;

			.item {
				padding: 30rpx 0;
				border-bottom: 1rpx solid #F6F6F6;

				.tops {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btns {
						display: flex;
						align-items: center;

						>view {
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.xufei {
							width: 120rpx;
							height: 64rpx;
							border-radius: 40rpx 40rpx 40rpx 40rpx;
							border: 2rpx solid #D9D9D9;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #0F1417;
							line-height: 40rpx;
							margin-right: 16rpx;
						}

						.shengji {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #FA4A53;
							line-height: 40rpx;
							width: 120rpx;
							height: 64rpx;
							background: #FFFFFF;
							border-radius: 72rpx 72rpx 72rpx 72rpx;
							border: 2rpx solid #FA4A53;
						}

						.kaitong {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 40rpx;
							width: 120rpx;
							height: 64rpx;
							background: #FA4A53;
							border-radius: 72rpx 72rpx 72rpx 72rpx;
							border: 2rpx solid #FA4A53;
						}
					}


					.left {
						flex: 1;
						display: flex;
						justify-content: space-between;

						.leftBox {
							display: flex;
							align-items: center;
						}

						.photo {
							margin-right: 20rpx;
							position: relative;

							image {
								display: block;
								width: 120rpx;
								height: 120rpx;
								border-radius: 50%;
							}

							.sex {
								position: absolute;
								width: 32rpx;
								height: 32rpx;
								// background: #FA4A53;
								border-radius: 50%;
								border: 2rpx solid #F7F8FA;
								bottom: 0;
								right: 0;

								image {
									display: block;
									width: 28rpx;
									height: 28rpx;
								}
							}
						}

						.names {
							flex: 1;

							.name {
								display: flex;
								align-items: center;
								// justify-content: space-between;
								padding-top: 18rpx;

								.fullname {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 500;
									font-size: 28rpx;
									color: #0F1417;
									line-height: 33rpx;
								}

								.tags {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 20rpx;
									margin-left: 8rpx;
									line-height: 20rpx;
									padding: 4rpx 10rpx;
									border-radius: 14rpx 14rpx 14rpx 14rpx;
									color: #0F1417;
									background: #EDEFF0;

									&.base {
										color: #E7EDF4 !important;
										background: #252E3C !important;
									}

									&.golden {
										color: #FFE1CF !important;
										background: #A06D08 !important;
									}

									&.bojin {
										color: #FFE1CF !important;
										background: #4B1C00 !important;
									}

									&.zuanshi {
										color: #D0EAF9 !important;
										background: #3E5980 !important;
									}
								}


							}

							.code {
								margin-top: 16rpx;
								// color: rgba(15, 20, 23, 0.6);
								display: flex;
								align-items: center;
								line-height: 1;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(15,20,23,0.7);
								line-height: 28rpx;

								// .id {
								// 	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								// 	font-weight: 400;
								// 	font-size: 20rpx;
								// 	color: rgba(15, 20, 23, 0.7);
								// 	line-height: 28rpx;
								// }

								// .line {
								// 	width: 2rpx;
								// 	height: 22rpx;
								// 	background: #BDB7B7;
								// 	margin: 0 10rpx;
								// }

								// .sex {
								// 	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								// 	font-weight: 400;
								// 	font-size: 20rpx;
								// 	color: rgba(15, 20, 23, 0.7);
								// 	line-height: 28rpx;
								// }

							}
						}
					}

				}
			}
		}

		.selectOptions {
			margin-bottom: 8rpx;

			.same {

				display: flex;
				flex-wrap: wrap;

				.item {
					margin-bottom: 16rpx;
					padding: 8rpx 20rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #0F1417;
					line-height: 36rpx;
					margin-right: 24rpx;
					background: #F6F7F9;
					border-radius: 104rpx 104rpx 104rpx 104rpx;

					&.active {
						background: #FA4A53;
						color: #FFFFFF;
					}
				}
			}
		}

		.searchBox {
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.Scan-code {
				width: 48rpx;
				height: 48rpx;
				margin-left: 20rpx;
			}
		}

		.search {
			flex: 1;

			height: 64rpx;
			background: #FFFFFF;
			border-radius: 152rpx 152rpx 152rpx 152rpx;
			border: 2rpx solid #FA4A53;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.inp {
				flex: 1;
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				margin: 4rpx;
				width: 128rpx;
				height: 56rpx;
				background: #FA4A53;
				border-radius: 152rpx 152rpx 152rpx 152rpx;
			}
		}

	}
</style>
